<template>
  <view>
    <!-- 搜索框 -->
    <view class="s">
    <input v-model="keyword" type="text" placeholder="请输入搜索关键字" @input="handleInput">
    <img class="search" src="@/static/search.png" alt="search">
    </view>
    <img class="adv" src="@/static/adv.jpg" alt="adv">
    <text class="text1">浏览:198.64万   发布:2289   用户:300万</text>
   <view class="w">
    <img class="w1" src="@/static/w1.png" alt="w1" @click="w1">
    <text class="t1">个体农户信用评估征信</text>
    <img class="w2" src="@/static/w2.jpg" alt="w2" @click="w2">
    <text class="t2">小微企业融资</text>
    <img class="w3" src="@/static/w3.jpg" alt="w2" @click="w3">
    <text class="t3">银行合作业务</text>
    </view>
    <!-- 搜索结果 -->
    <view v-if='false' >
      <view v-for="(result, index) in searchResult" :key="index">
        {{ result }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '', // 搜索关键字
      searchResult: [], // 搜索结果
    };
  },
  methods: {
    handleInput() {
      this.searchResult = this.sourceData.filter(item => item.includes(this.keyword));
    },
    w1(){
        uni.navigateTo({
          url: '/pages/wcredit/wcredit'
        })
    },
    w2(){
        uni.navigateTo({
          url: '/pages/wfin/wfin'
        })
    },
    w3(){
        uni.navigateTo({
          url: '/pages/wwork/wwork'
        })
    },
  },
  // 示例数据，实际使用时根据需求修改
  computed: {
    sourceData() {
      return ['apple', 'banana', 'orange', 'grape', 'watermelon', 'pineapple'];
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需求自行定义 */
.s{
    position: relative;
}
input{
    border: 2px solid #595b5c ; 
    border-radius: 20px;
    width: 280px;
    margin-left: 20px;
}
.search{
    position: absolute;
    height: 30px;
    width: 30px;
    margin-left: 270px;
    top: 2%;
}
.adv{
    height: 100px;
    margin-top: 10px;
}
.text1{
    font-size: 13px;
    margin-left: 40px;
    border-bottom: 1px solid #777676;
}
.w1{
    margin-top: 5%;
    height: 260px;
}
.w img{
    position: absolute;
    width:150px;
    border-radius: 10%;
}
.w{
    height: 250px;
    position: relative;
}
.w text{
     position: absolute;
     width: 120px;
    font-size: 20px;
    font-weight: bold;
    color: rgb(12, 117, 209);
}
.t1{
    left: 5%;
    top: 8%;
}
.w2{
    height: 120px;
    top:8%;
    left: 50%;
}
.t2{
    left: 55%;
    top: 12%;
}
.w3{
    height: 120px;
    left: 50%;
    top: 60%;
}
.t3{
    left: 55%;
    top: 65%;
}
</style>
